<template>
    <div class="talk">
        <button @click="getlovetalk">获取一句情话</button>
        <ul>
            <li v-for="talk in lovelist" :key="talk.id">{{ talk.content }}</li>
        </ul> 
    </div>
</template>
 
<script setup name="LoveTalk">
    import { reactive } from "vue";
    import axios from "axios";
    import { storeToRefs } from "pinia";
    import { useLoveTalkStore } from "@/store/LoveTalk";
    const LoveTalkStore = useLoveTalkStore()

    //50subscibe的使用
    LoveTalkStore.$subscribe((mutate,state)=>{
        console.log('LoveTalk.vue中的调用了',mutate,state);
        localStorage.setItem('my_lovelist',JSON.stringify(state.lovelist))//my_lovelist是自己随意命名的
    })


    // let lovelist = LoveTalkStore.lovelist
    // console.log(LoveTalkStore);
    let {lovelist} = storeToRefs(LoveTalkStore)
    // console.log(storeToRefs(LoveTalkStore));
    
    import { nanoid } from "nanoid";
    // 数据
    // let lovelist = reactive([
    //     {
    //         id:'fiewr',content:'null'         
    //     },
    //     {
    //         id:'uiwrw',content:'不要讲情话'         
    //     }
    // ])

    // 方法
    async function getlovetalk(){
        LoveTalkStore.getatalk()
    }
</script>
 
<style scoped>
    .talk{
        background-color:orange;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 100px;
    }
</style>

